<template>
	<view v-if="pageShow">
		<view class="hsbox">
			<view class="flexbetween">
				<view class="flexleft">
					<image class="dptp margin_right3" :src="dataAll.logo_text" mode=""></image>
					<view class="">
						<view class="flexleft" @click="jumper('/pages_wode/qiehuanmend?id=',listid)">
							<view class="sanshier xiaobai fonweight xiankuan" style="max-width: 300rpx;width: auto;">{{dataAll.name}}</view>
							<image style="width: 40rpx;height: 40rpx;" src="../static/images/system/qh.png" mode="">
							</image>
						</view>
						<view class="ershil xiaobai margin_top2">当前店铺</view>
					</view>
				</view>
				<view class="flexright">
					<view class="margin_right" @click="jumper('/pages_wode/mendianxx?id=',listid,5)">
						<view class="jbicon">
							<image src="../static/images/system/bj.png" mode=""></image>
						</view>
						<view class="strongtext xiaobai margin_top1">编辑信息</view>
					</view>
					<view class="" @click="jumper('/pages_wode/wodedianyuan?id=',listid,6)">
						<view class="jbicon">
							<image src="../static/images/system/bj.png" mode=""></image>
						</view>
						<view class="strongtext xiaobai margin_top1">店员管理</view>
					</view>
				</view>
			</view>
		</view>
		<view class="baisbox mainpadding">
			<view class="flexbetween">
				<view class="" @click="jumper('/pages_wode/dianpudd?i=1&id=',listid,7)">
					<view class="bigtext xiaohei fonweight textcenter">{{dataAll.order_data.db_order_num}}</view>
					<view class="ershil xiaohui fonweight margin_top2">待发货</view>
				</view>
				<view class="" @click="jumper('/pages_wode/dianpudd?i=2&id=',listid,7)">
					<view class="bigtext xiaohei fonweight textcenter">{{dataAll.order_data.dhx_order_num}}</view>
					<view class="ershil xiaohui fonweight margin_top2">待核销</view>
				</view>
				<view class="" @click="jumper('/pages_wode/dianpudd?i=3&id=',listid,7)">
					<view class="bigtext xiaohei fonweight textcenter">{{dataAll.order_data.dpj_order_num}}</view>
					<view class="ershil xiaohui fonweight margin_top2">待评价</view>
				</view>
				<view class="" @click="jumper('/pages_wode/dianpudd?i=5&id=',listid,7)">
					<view class="bigtext xiaohei fonweight textcenter">{{dataAll.order_data.ywc_order_num}}</view>
					<view class="ershil xiaohui fonweight margin_top2">已完成</view>
				</view>
				<view class="" @click="jumper('/pages_wode/dianpudd?i=4&id=',listid,7)">
					<view class="bigtext xiaohong fonweight textcenter">{{dataAll.order_data.yqx_order_num}}</view>
					<view class="ershil xiaohui fonweight margin_top2">已取消</view>
				</view>
			</view>
			<view class="hxbox flexbetween margin_top">
				<input placeholder="请输入核销码" type="text" v-model="hx_code" confirm-type="search" @confirm="hexiao(2)"/>
				<view class="flexcenter hxbtn" @click="hexiao(2)">核销</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="pmitp1" @click="scanbarCode()">
					<view class="titletext xiaocheng fonweight">扫码核销</view>
					<view class="strongtext margin_top1" style="color: #FFB785;">订单明细</view>
				</view>
				<view class="pmitp2" @click="jumper('/pages_wode/shangpgl?id=',listid,3)">
					<view class="titletext fonweight" style="#E79F00">商品管理</view>
					<view class="strongtext margin_top1" style="color: #FFCE61;">商品明细</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="pmitp3" @click="jumper('/pages_wode/wodeshouyi?id=',listid,8)">
					<view class="titletext zhonghei fonweight" style="#9090FF">我的收益</view>
					<view class="strongtext margin_top1" style="color: #AFB2FF;">查看详细记录</view>
				</view>
				<view class="pmitp4" @click="jumper('/pages_wode/baozhengjin?id=',listid,4)">
					<view class="titletext zhonghei fonweight" style="#2885FD">我的保证金</view>
					<view class="strongtext margin_top1" style="color: #96BBFF;">查看保证金详情</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="titletext zhonghei fonweight">数据分析</view>
				<view class="block flexleft">
					<view :class="data_type==1?'nofocustext':'focustext'" @click="selectab(1)">销售额</view>
					<view :class="data_type==2?'nofocustext':'focustext'" @click="selectab(2)">订单量</view>
				</view>
			</view>
			<view class="charts-box" v-show="!zshow && !yshow">
				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
			</view>
			<view class="charts-box" v-show="zshow || yshow"></view>
			<view class="flexcenter margin_top1">
				<view class="ribox flexbetween">
					<view :class="timetype=='day'?'yxbox':'wxzbox'" @click="changetype('day')">日</view>
					<view :class="timetype=='month'?'yxbox':'wxzbox'" @click="changetype('month')">月</view>
					<view :class="timetype=='year'?'yxbox':'wxzbox'" @click="changetype('year')">年</view>
					<view class="wxzbox" @click="zshow=true">自定义</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
			@cancel="zshow= false"></u-datetime-picker>
		<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="jscancel"
			:minDate="minDate"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#FF9341", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel:false,
					
					padding: [15, 15, 5, 15],
					enableScroll: true,
					dataPointShape:false,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount:5,
						rotateLabel:true,
						rotateAngle:45,
						// scrollShow:true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				},
				listid:"",
				dataAll:{},
				pageShow:false,
				timetype:"day",//day=日,month=月,year=年
				startime: httpRequest.returnDate(Number(new Date())),
				endtime: httpRequest.returnDate(Number(new Date())),
				minDate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
				data_type:1,//类型:1=销售额,2=订单量
				hx_code:""
			}
		},
		onLoad(options) {
			uni.$on("changedp",data=>{
				console.log("切换门店了",data);
				this.listid = data
				// this.getdetail()
			})
			uni.$on("shuaxin",data=>{
				// this.getdetail()
			})
			this.listid = options.id
			
			this.shopOrderDataFx()
		},
		onShow() {
			this.getdetail()
		},
		onUnload() {
			uni.$off("changedp")
			uni.$off("shuaxin")
		},
		methods: {
			scanbarCode() {
				if(!this.returnqx(1)){
					httpRequest.toast("暂无权限")
					return false
				}
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let arr = res.result.split("hx_code=")
						uni.navigateTo({
							url:"/pages_wode/heixiao?hx_code="+arr[1]
						})
					}
				});
			},
			returnqx(val){
				let flag = false
				if(this.dataAll.shop_user.rolelist==0){
					flag = true
				}else{
					let arr = this.dataAll.shop_user.rolelist.split(",")
					if(arr.indexOf(val.toString())!=-1){
						flag = true
					}
				}
				return flag
			},
			hexiao(qx){
				if(!this.returnqx(qx)){
					httpRequest.toast("暂无权限")
					return false
				}
				if(this.hx_code==""){
					httpRequest.toast("请输入核销码")
					return false
				}
				uni.navigateTo({
					url:"/pages_wode/heixiao?hx_code="+this.hx_code
				})
			},
			changetype(val){
				this.timetype = val
				this.shopOrderDataFx()
			},
			// 开始时间
			zconfirm(e) {
				this.minDate = e.value
				this.startime = httpRequest.returnDate(e.value)
				this.zshow = false
				this.yshow = true
			},
			//结束时间
			yconfirm(e) {
				this.endtime = httpRequest.returnDate(e.value)
				this.yshow = false
				this.shopOrderDataFx()
			},
			jscancel(){
				this.yshow = false
			},
			getdetail(){
				httpRequest.request('/api/shopcl/myShopDetail', 'GET', {
					shop_id: this.listid
				}).then(res => {
					if(res.code==1){
						this.pageShow = true
						this.dataAll = res.data
					}else{
						httpRequest.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
					
				})
			},
			shopOrderDataFx(){
				httpRequest.request('/api/shopcl/shopOrderDataFx', 'POST', {
					shop_id: this.listid,
					start_time:this.startime,
					end_time:this.endtime,
					type:this.timetype,
					// start_time:"2024-01-01",
					// end_time:"2024-02-18",
					// type:"",
					data_type:this.data_type
				}).then(res => {
					let msg = {
						categories: res.data.column,
						series: [{
							name: this.data_type==1?"销售额":"订单量",
							data: res.data.series.count_price
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(msg));
				})
			},
			selectab(i) {
				if (i == this.data_type) {
					return false
				}
				this.data_type = i
				this.shopOrderDataFx()
			},
			jumper(url,val,qx) {
				if(qx){
					if(!this.returnqx(qx)){
						httpRequest.toast("暂无权限")
						return false
					}
				}
				uni.navigateTo({
					url: url+val
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.yxbox {
		border-right: 2rpx solid #E3E3E6;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25%;
		height: 60rpx;
		font-size: 24rpx;
		background-color: #EEEEF1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.wxzbox {
		border-right: 2rpx solid #E3E3E6;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25%;
		height: 60rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.ribox {
		width: 625rpx;
		height: 60rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #ECECED;
	}

	.block {
		background: #fff;
		width: 228rpx;
		height: 56rpx;
		border: 2rpx solid #FF9341;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.focustext {
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		width: 114rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nofocustext {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 114rpx;
		height: 56rpx;
		background: #FF7510;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.pmitp1 {
		width: 40.5%;
		padding: 26rpx 30rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240201/33fd8e11cd4b6a0177cb65f23e38b9f4.png');
	}

	.pmitp2 {
		width: 40.5%;
		padding: 26rpx 30rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240201/80807a23d9bcd09075129438d0bdab84.png');
	}

	.pmitp3 {
		width: 40.5%;
		padding: 26rpx 30rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240201/8eca92b3061599fcf43f5da93a9aba92.png');
	}

	.pmitp4 {
		width: 40.5%;
		padding: 26rpx 30rpx 30rpx;
		background-size: 100% 100%;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240201/87e5e1fd9a2bfcf48f0336fe0a5ed3e5.png');
	}

	.hxbtn {
		width: 114rpx;
		height: 58rpx;
		background: #FF9341;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.hxbox {
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 16rpx;
	}

	.baisbox {
		position: relative;
		top: -30rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.jbicon {
		width: 56rpx;
		height: 56rpx;
		margin: auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dptp {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.hsbox {
		background-color: #ff9341;
		padding: 40rpx 30rpx 60rpx;
	}
</style>